<style scoped>
</style>
<!-- 编辑页面 SEO 设置的弹窗 -->
<template>
  <div class="seo-page-dialog">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="960px" :close-on-click-modal="false">
      <el-form v-loading="loading" :model="form" label-width="180px">
        <el-form-item label="Title 标题：">
          <el-input v-model="form.title" style="width:50%;" size="medium" maxlength="250" placeholder="输入标题内容">
          </el-input>
        </el-form-item>
        <el-form-item label="Keywords 关键字：">
          <el-input v-model="form.keywords" style="width:90%;" size="medium" maxlength="250" placeholder="输入关键字内容">
          </el-input>
        </el-form-item>
        <el-form-item label="Description 描述：">
          <el-input type="textarea" v-model="form.description" style="width:90%;" maxlength="1500" rows="6"
            placeholder="输入描述内容">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" size="medium" @click="clear()">清 空</el-button>
        <el-button type="primary" size="medium" @click="onSubmit()">保 存</el-button>
        <el-button type="success" size="medium" @click="onSubmitAndClose()">保存并关闭</el-button>
        <el-button @click="dialogFormVisible = false" size="medium">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      loading: true,
      title: '',
      dialogFormVisible: false,
      form: {
        title: '',
        keywords: '',
        description: ''
      }
    }
  },
  methods: {
    show (systemId, itemId) {
      // 初始化数据
      this.dialogFormVisible = true
      this.form = {
        title: '',
        keywords: '',
        description: ''
      }
      this.title = ''
      this.loading = true
      // 请求后台获取数据
      this.$post('/seo/seoitem/c-info', { systemId, itemId }).then(response => {
        if (response && response.itemId) {
          this.form = response
        }
        if (response && response.itemName) {
          this.title = response.itemName + '-系统内容SEO设置'
        }
        this.loading = false
      })
    },
    clear () {
      this.form.title = ''
      this.form.keywords = ''
      this.form.description = ''
    },
    onSubmit (callback) {
      // 提交表单
      this.loading = true
      this.$jpost('/seo/seoitem/save', this.form).then(response => {
        if (response && response.itemId) {
          this.form = response
          if (typeof callback === 'function') {
            callback()
          }
        }
        this.loading = false
      })
    },
    onSubmitAndClose () {
      this.onSubmit(() => {
        this.dialogFormVisible = false
      })
    }
  }
}

</script>
